@keyframes slideUp
  0%
    opacity 0
  100%
    opacity 1

@keyframes headShake
  0%
    transform translateX(0)
  6.5%
    transform translateX(-6px) rotateY(-9deg)
  18.5%
    transform translateX(5px) rotateY(7deg)
  31.5%
    transform translateX(-3px) rotateY(-5deg)
  43.5%
    transform translateX(2px) rotateY(3deg)
  50%
    transform translateX(0)

.headShake
  animation-duration 1s
  animation-fill-mode both
  animation-timing-function ease-in-out
  animation-name headShake
  transform translateZ(0)

.standardFade-enter
  opacity 0

.standardFade-enter.standardFade-enter-active
  opacity 1
  transition var(--standard)

.standardFade-leave
  opacity 1

.standardFade-leave.standardFade-leave-active
  opacity 0
  transition var(--standard)

.signer
  position relative
  z-index 3001
  transition var(--standard), 0s linear height
  will-change transform
  transform translate3d(0, 0, 0)
  pointer-events auto
  box-sizing border-box
  z-index 10000000

  .signerContainer
    position relative
    z-index 3002
    padding 0px 0px 5px 0px

  .signerDetailsFullAddress
    position absolute
    display flex
    justify-content center
    align-items center
    flex-direction column
    top 0
    left 0px
    right 0px
    bottom 0px
    cursor pointer
    pointer-events auto
    // animation slideUp linear 0.2s
    *
      pointer-events none

    .signerDetailsFullAddressCopied
      display flex
      align-items center
      justify-content center
      font-size 14px
      font-weight 500
      span
        margin-left 8px

    .signerDetailsFullAddressText
      display flex
      align-items center
      max-width fit-content
      font-family 'FiraCode'
      margin-top 4px
      pointer-events auto
      border-radius 1px
      font-size 13.5px
      position relative
      cursor pointer

  .signerDetails
    position absolute
    display flex
    justify-content center
    flex-direction column
    top 0
    left 60px
    right 120px
    bottom 0px
    pointer-events none

    .signerDetailsENSName
      font-family 'FiraCode'
      letter-spacing -1px
      font-size 16px
      font-weight 300
      margin-top 5px
      pointer-events auto
      max-width fit-content

    .signerDetailsName
      font-family 'MainFont'
      font-size 16px
      font-weight 400
      margin-top 4px
      pointer-events none

    .signerDetailsAddressCopy
      margin-left 10px
      display flex
      align-items center
      padding 0px 6px 0px 0px
      border-radius 12px
      display none

    .signerDetailsAddress
      display flex
      align-items center
      max-width fit-content
      font-family 'FiraCode'
      margin-top 2px
      pointer-events auto
      padding 0px 0px 2px 1px 
      border-radius 12px
      font-size 15px
      position relative
      cursor pointer
      left -1px
      transition all linear 500ms
      *
        pointer-events none

      .signerDetailsAddressDivide
         position relative
         padding 0px 1px 0px 2px
    
    .signerDetailsAddress:hover
      color var(--moon)

  .signerAddress
    font-family 'FiraCode'

    .transactionToAddressLargeWrap
      position absolute
      bottom 15px
      left 66px
      height 40px
      width 164px
      z-index 5

    .transactionToAddressLarge
      position absolute
      bottom 0px
      left 0px
      max-width 100%
      font-weight 300
      display flex
      font-size 15px
      opacity 1

      .transactionToAddressLargeEllipsis
        padding 2px 1px

    .transactionToAddressLarge:hover
      background var(--ghostC)
        
    .transactionToAddressCopy
      display flex
      justify-content center
      align-items center
      font-size 8px
      letter-spacing 1px
      opacity 1
      pointer-events none
      text-transform uppercase
      font-weight 400
      letter-spacing 1px
      font-family 'MainFont'
      color var(--outerspace08)
      border-radius 10px
      transform translateY(0px)
      bottom 30px
      opacity 0

    .transactionToAddressFull
      position absolute
      top 3px
      right 0
      bottom 0
      left 0
      display flex
      justify-content center
      align-items center
      font-size 13.5px
      font-weight 300    
      z-index 80
      cursor pointer
      * 
        pointer-events none
        
      
      .transactionToAddressFullCopied
        position absolute
        right 18px
        top 25px
        left 18px
        font-family 'MainFont'
        text-align center

        svg
          position relative
          top 0px
          margin-left 11px

    .transactionToAddressENS
      transform translateY(-11px)
      font-weight 300

    .transactionToAddressFullHidden
      opacity 0
      pointer-events none

  .signerTop
    position relative
    opacity 1
    z-index 3030000
    border-radius 26px
    transition var(--standard), background 0.2s linear
    z-index 9999000
    height 74px
    background var(--ghostA)
    margin 0px 0px 6px 0px
    box-shadow 0px 4px 8px var(--ghostY)
    border-bottom 2px solid var(--ghostZ)
    cursor pointer
    overflow hidden

    div
      z-index 3004

    .accountNotificationBadge
      position absolute 
      top 19px
      right 64px
      width 60px
      z-index 300000
      height 39px
      width 38px
      padding-left 2px
      box-sizing border-box
      border-top-left-radius 13px
      border-bottom-left-radius 13px
      border-top-right-radius 8px
      border-bottom-right-radius 8px
      display flex
      justify-content center
      align-items center
      -webkit-app-region no-drag
      transform translate3d(0, 0, 0)
      background var(--ghostA)
      position absolute
      color var(--outerspace01)
      font-size 16px
      font-weight 400
      transition var(--standardFast)
      box-shadow 0px 2px 2px var(--ghostY)
      border-bottom 2px solid var(--ghostZ)
      z-index 999999999
      pointer-events none
      
      span
        position relative
        z-index 4000

    .accountNotificationBadgeReady
      color var(--outerspace)
      background var(--ghostB)

    .accountNotificationBadgeActive
      border-bottom none
      span
        color var(--goodOver)

    .accountNotificationBadgeActive::before
      content ''
      position absolute
      z-index 3
      inset 0px
      background var(--good)
      border-top-left-radius 13px
      border-bottom-left-radius 13px
      border-top-right-radius 8px
      border-bottom-right-radius 8px
      border-bottom 2px solid var(--goodShade)
      box-shadow 0px 2px 2px var(--ghostY)

    .transactionToAddress
      .transactionToAddressLarge
        svg
          color var(--outerspace)

    .signerSelect
      position absolute 
      top 16px
      right 10px
      z-index 300000
      border-radius 16px
      height 44px
      width 95px
      -webkit-app-region no-drag
      transition none
      transform translate3d(0, 0, 0)
      background var(--ghostZ)
      cursor pointer

      .signerSelectButton
        position absolute 
        top 3px
        right 3px
        bottom 2px
        z-index 300000
        border-radius 13px
        width 48px
        background var(--ghostA)
        display flex
        justify-content center
        align-items center
        border-top-right-radius 13px
        border-bottom-right-radius 13px
        border-top-left-radius 8px
        border-bottom-left-radius 8px
        padding-right 4px
        box-sizing border-box
        border-bottom 2px solid var(--ghostZ)
        box-shadow 0px 2px 2px var(--ghostY)
        transform translateY(0px)
        cursor pointer
        transition background 0.1s linear
        *
          pointer-events none
      
      .signerSelectButton:hover
        background var(--ghostC)
        transform translateY(-1px)
        box-shadow 0px 2px 4px var(--ghostX)

      .signerSelectButton:active
        background var(--ghostC)
        transform translateY(0px)
        box-shadow 0px 2px 1px var(--ghostX)
      
      .signerSelectIconWrap
        padding 1px 0px 0px 2px
        pointer-events none

        div, svg
          pointer-events none
        
        .accountActive
          color var(--good)

      .signerSelectIcon
        transition var(--standard)
        pointer-events none

    .accountGrabber
      position absolute
      top 5px 
      bottom 5px
      right 110px
      width 19px
      color var(--ghostX)
      cursor grab
      z-index 5000000000000000
      padding-top 9px
      opacity 1
      transition var(--standardSlow)

      svg
        position relative
        left -8px
        
      svg, div
        pointer-events none

    .accountGrabber:active
      cursor grabbing

    .accountIndicator
      position absolute 
      top 20px
      left 7px
      bottom 20px
      box-sizing border-box
      border-radius 2px
      width 4px
      background var(--ghostZ)
      pointer-events none
    
    .accountIndicatorGood
      background var(--good)

    .accountIndicatorLocked
      background var(--moon)

    .signerType
      position absolute 
      top 0px
      left 0px
      bottom 0px
      width 64px
      z-index 3400
      transition var(--standard)
      -webkit-app-region no-drag
      box-sizing border-box
      z-index 300000
      pointer-events none

      .signerTypeStatusBadge
        position absolute
        top 13px
        left 10px
        width 18px
        height 18px
        color var(--moon)
        border-radius 50%
        display flex
        justify-content center
        align-items center
        pointer-events none

      .signerTypeStatusBadgeDisconnected
        color var(--outerspace)
        display none

      .signerTypeStatusBadgeLocked
        color var(--moon)
        top 12px
        left 11px

      .signerSelectIconWrap
        position absolute
        top 3px
        left 14px
        width 41px
        bottom 0px
        display flex
        justify-content center
        align-items center

        div, svg
          pointer-events none

      // .signerIconHot
      //   color var(--hot)

      .signerIconTrezor
        transform translateY(-3px)

      .signerIconLedger
        transform translateY(-1px)

      .signerImage
        position absolute
        top 50%
        left 50%
        height 34px
        width 34px
        margin-top -9px
        margin-left -9px
        opacity 1
        transition var(--standardSlow)

        img
          height 38px

        svg
          color var(--ghostD)
          filter drop-shadow(0px 10px 0px 0px var(--thick)) 

        .trezorImage
          height 35px
          margin-top -6px

      .signerText
        position absolute
        top 44px
        left 0
        right 0
        height 20px
        display flex
        flex-direction column
        justify-content center
        align-items center
        text-transform uppercase
        font-size 11px
        line-height 10px
        font-weight 300
        letter-spacing 2px
        color var(--spacewhite)
        opacity 1
        transition var(--standardSlow)
        margin-left 2px
        display none

  .signerTop:hover
    background var(--ghostB)
    .signerSelect
      .signerSelectButton
        background var(--ghostB)

  // .signerTopActive:hover
  //   background var(--ghostA)
  
  // .okSigner
  //   .signerTop:hover
  //     background var(--ghostA)


  .signerTopNoHover
    pointer-events none !important
    * 
      pointer-events none !important
    // border-bottom 2px solid var(--ghostZ0)
    // position relative
    // .signerSelect
    //   pointer-events auto !important
    //   .signerSelectButton
    //     pointer-events auto !important

  // .signerTopNoHover:hover
    // background var(--ghostA) !important
    // .signerSelect
    //   .signerSelectButton
    //     pointer-events auto !important
    //     background var(--ghostA)
    //   .signerSelectButton:hover
    //     background var(--ghostB)

  .accountListWrap
    position absolute
    top 100px
    left 0
    right 0
    // height 0px
    height 0px
    background var(--ghostB)
    // height 40px
    z-index 3015
    transition var(--standardFast)
    border-bottom-left-radius 16px
    border-bottom-right-radius 16px
    overflow hidden
    box-shadow 0px 2px 3px var(--thin), 0px 19px 9px -14px var(--thin) !important
    transform translateZ(0)
    display none

    .accountList
      position absolute
      left 0
      right 0
      bottom 0
      height 330px
      z-index 3018
      overflow hidden
      padding 15px 0px 10px 0px

      .settingsMenu
        background linear-gradient(var(--ghostB), var(--ghostD))
        display flex
        justify-content center
        flex-direction column
        align-items center
        position absolute
        left 0
        right 0
        bottom 0
        height 50px
        transition var(--standardSlow)
        opacity 1
        pointer-events auto
        .settingsMenuSelect
          position relative
          height 12px
          width 105px
          box-sizing border-box
          .settingsMenuMark
            height 12px
            position absolute
            transition var(--standard)
            .settingsMenuMarkLine
              position absolute
              background outerspace
              height 2px
              top 0px
              left 7px
              right 7px
              border-radius 1px
        .settingsMenuItems
          box-sizing border-box
          height 33px
          width 105px
          display flex
          .settingsMenuItem
            position relative
            box-sizing border-box
            z-index 1230
            width 35px
            height 33px
            color var(--outerspace08)
            .settingsMenuItemIcon
              top 0
              right 0
              bottom 0px
              left 0
              position absolute
              z-index 1234
              padding 10px 10px
          .settingsMenuItemSelected, .settingsMenuItem:hover
            color var(--outerspace)

      .accountListItems
        background var(--ghostB)
        height 280px
        min-height 280px
        width 100%
        display flex
        justify-content flex-start
        align-items center
        flex-direction column
        position relative
        z-index 3
        transition var(--standardSlow)
        // opacity 0
        transform translateY(-200px)
        pointer-events none

        .accountListItem
          background var(--ghostB)
          width calc(100% - 40px)
          height 55px
          min-height 55px
          border-bottom 1px solid var(--thin)
          display flex
          justify-content space-between
          align-items center
          padding 0px 20px 0px 20px
          font-family 'FiraCode'
          color var(--outerspace08)
          position relative
          z-index 4

          .accountListItemCheck
            color var(--outerspace01)
            margin-bottom 3px

          .accountListItemAddress
            svg
              margin 0px 4px 0px 4px

        .accountListItem:last-child
          border-bottom none

        .accountListItemSelected
          background var(--ghostC)
          color var(--outerspace)
          border-radius 6px
          border-bottom 1px solid var(--thick0)
          box-shadow 0px 2px 3px var(--thin), 0px 19px 9px -14px var(--thin) !important
          position relative
          z-index 10
          .accountListItemCheck
            color var(--outerspace)

      .accountPageToggle
        padding-top 20px
        height 20px
        min-height 20px
        padding-bottom 10px
        width 100%
        display flex
        justify-content center
        align-items center
        font-family 'FiraCode'
        position relative
        z-index 2
        transition var(--standardSlow)
        opacity 0
        pointer-events none
        transform translateY(-200px)

        .accountPageCurrent
          border-radius 3px
          height 27px
          width 27px
          display flex
          justify-content center
          align-items center
          font-size 18px

        .accountPageButton
          border-radius 3px
          height 27px
          width 27px
          display flex
          justify-content center
          align-items center
          box-sizing border-box

        .accountPageButtonLeft
          padding-right 1px

        .accountPageButtonRight
          padding-left 1px

        .accountPageButton:hover
          background var(--ghostD)

  .accountMenu
    position absolute
    top 64px
    right 0px
    left 0px
    // padding-top 20px
    border-radius 6px
    z-index 3005
    overflow-x hidden
    overflow-y hidden
    // opacity 1
    transition var(--standard), 0.1s linear background
    will-change transform
    background var(--ghostC)
    z-index 9999003
    height 40px
    background var(--ghostC)
    //animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0)
    // background red // var(--ghostB)
    box-shadow 0px 4px 6px -1px var(--thick)
    animation-delay 0.2s
    .accountMenuLeft
      position absolute
      top 0px
      left 0px
      bottom 0px
      display flex
      .accountMenuItem
        border-right 1px solid var(--thick)
      .accountMenuItem:first-child
        padding-left 4px

    .accountMenuRight
      position absolute
      top 0px
      right 0px
      bottom 0px
      .accountMenuItem
        border-left 1px solid var(--thick)
      .accountMenuItem:last-child
        padding-right 4px
    
    .accountMenuItem
      height 40px
      width 40px
      display flex
      justify-content center
      align-items center
      cursor pointer

      div, svg 
        pointer-events none

    .accountMenuItem:hover
      background var(--ghostD)

  .signerMid
    position absolute
    top calc(22px + 83px)
    right 0px
    bottom 7px
    left 0px
    border-radius 6px
    z-index 3005
    overflow-x hidden
    overflow-y hidden
    opacity 1
    transition var(--standard), 0.1s linear background
    will-change transform
    background var(--ghostC)
    z-index 9999003
    box-shadow 0px 4px 6px -1px var(--thick)
    animation-delay 0.4s

    > div
      transition var(--standard)
      opacity 0

    .signerMidMenu
      background var(--thin)
      height 50px
      display flex
      flex-direction column
      justify-content center
      align-items center

      .signerMenuItems
        height 25px
        display flex
        justify-content center
        align-items center
        margin-top 5px

        .signerMenuItem
          height 30px
          width 40px
          display flex
          justify-content center
          align-items center

      .signerMenuSelect
        height 10px
        width 80px
        position relative

        .signerMenuSelectMarker
          position absolute
          left 0px
          height 2px
          width 20px
          // margin 0px 4px
          margin 0px 10px
          background black

    .signerNode
      display flex
      justify-content center
      align-items center
      font-size 12px
      height 40px
      border-top 1px solid var(--ghostB)

  .signerEvents
    height 200px
    overflow scroll
    background rgba(0, 0, 50, 0.1)
    width 100%

  .signerSelectDown
    transform rotate(180deg)
    .signerSelectArrows
      .signerSelectArrow
        svg
          color var(--spacewhite)

  .signerSelectLeft
    left 3px

  .signerSelectRight
    right 3px

  .signerSelectDown.signerSelectLeft
    left -50px
    opacity 0

  .signerSelectDown.signerSelectRight
    right -50px
    opacity 0

  .signerReady
    font-size 12px
    width 100%

  .openSigner
    pointer-events none
    .signerTop
      cursor auto
      position relative
      border-bottom 2px solid var(--ghostZ0)
      top -5px
      .signerSelect
        pointer-events auto !important
        .signerSelectButton
          pointer-events auto !important

    .signerTop:hover
      background var(--ghostA) !important
      .signerSelect
        .signerSelectButton
          pointer-events auto !important
          background var(--ghostA)
        .signerSelectButton:hover
          background var(--ghostB)

  .signerSelectDown.signerSelectRight
    right 0

  .signerSelectDown.signerSelectLeft
    left 0

  .accountListWrap
    height 60px

.signerInSettings
  .signerTop
    .addressSelect
      transform translateY(0px)
      pointer-events auto
  .accountListWrap
    height 130px
    transform translateY(0px)
    will-change height

.signerAccountExpand
  .addressSelectArrow:first-child
    transition var(--standardSlow)
    svg
      transform rotate(-180deg)
  .addressSelectArrow:last-child
    transition var(--standardSlow)
    svg
      transform rotate(180deg)
  .accountListWrap
    transition var(--standardSlow)
    height 425px
    .accountList
      .accountListItems
        pointer-events auto
        transform translateY(0px)
        // opacity 1
      .accountPageToggle
        opacity 1
        pointer-events auto
        transform translateY(0px)
      .settingsMenu
        opacity 0
        pointer-events none
        transform translateY(50px)

.signerVerifyText
  font-size 15px
  text-align center
  display flex
  justify-content center
  align-items center
  height 70px
  padding 0px 30px

.moduleRow
  height 30px
  margin-bottom 4px
  display flex
  align-items center

  input
    z-index 200
    user-select auto
    background var(--ghostC)
    outline none
    border none
    margin-left 8px
    height 100%
    color var(--outerspace)
    border-radius 8px
    padding 0px 8px

.moduleButton
  width 100%
  height 40px
  background var(--ghostB)
  border-radius 20px
  color var(--outerspace)
  display flex
  justify-content center
  align-items center
  font-weight 400
  font-size 13px
  box-sizing border-box
  text-transform uppercase
  box-shadow 0px 1px 2px var(--ghostZ)
  
  svg
    position relative

  span
    padding-left 4px

  *
    pointer-events none

.moduleButton.signerVerifyInProgress
  background var(--ghostC)
  color var(--outerspace04)

.moduleButton:hover:not(.signerVerifyInProgress)
  cursor pointer
  background var(--ghostD)
  box-shadow 0px 4px 6px var(--ghostA)

.moduleButtonBad
  color var(--bad)

.moduleButtonGood
  color var(--good)

.moduleButtonLocked
  color var(--ghostD)

.moduleButtonLocked:hover
  background var(--ghostB)
  box-shadow 0px 2px 2px var(--ghostA)
